<template>
  <el-dialog
      v-model="dialogVisible"
      title="修改宿舍"
      width="30%"
      :before-close="handleClose"
  >
    <el-form :model="form">
      <el-form-item label="宿舍长:">
        <el-select v-model="form.roommaster" placeholder="下拉选择宿舍长">
          <el-option v-for="(item,index) in userList" :key="index" :label="item.name" :value="item.id"/>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose()">取消</el-button>
        <el-button type="primary" @click="update()">
          修改
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import axios from "axios";
import {ElMessage} from "element-plus";

export default {
  name: "update",
  props: {
    getDialog: {
      type: Boolean,
      required: true
    },
    getInfo: {
      type: Object,
      required: true
    }
  },
  watch: {
    getDialog: {
      handler(val) {
        this.dialogVisible = val
      }
    },
    getInfo: {
      handler(val) {
        this.form = val
        this.getUserList()
      },
      deep: true
    }
  },
  data() {
    return {
      dialogVisible: false,
      form: {
        roommaster: undefined
      },
      userList: []
    }
  },
  methods: {
    getUserList() {
      axios({
        url: "http://localhost:8888/user/room",
        method: "post",
        data: this.form
      }).then(res => {
        if (res.status == 200) {
          this.userList = res.data
        }
      })
    },
    update() {
      axios({
        url: "http://localhost:8888/dormitory/info/change",
        method: "put",
        data: this.form
      }).then(res => {
        if (res.data) {
          ElMessage({
            message: "修改成功!",
            type: "success"
          })
          this.handleClose()
        } else {
          ElMessage({
            message: "修改失败!",
            type: "warning"
          })
        }
      })
    },
    handleClose() {
      this.dialogVisible = false
      this.$emit("close", false)
    }
  }
}
</script>

<style scoped>

</style>